<!-- 弹出的对话框 -->
<script setup lang="ts">
withDefaults(defineProps<{
  title: string
  content?: string
  confirmLabel?: string
  cancelLabel?: string
  showCancelButton?: boolean
}>(), {
  confirmLabel: '确定',
  cancelLabel: '取消',
  showCancelButton: true,
})

defineEmits(['cancel', 'confirm'])
</script>

<template>
  <view class="relative w-690rpx flex flex-col items-center rounded-14rpx bg-white" @tap.stop="">
    <image v-if="showCancelButton" class="absolute right-36rpx top-36rpx h-27rpx w-27rpx" src="@/static/images/xmark.png" @tap="$emit('cancel')" />
    <Spacer height="45" />
    <view class="text-32rpx text-#333333 font-semibold leading-36rpx">
      {{ title }}
    </view>
    <Spacer height="35" />
    <view v-if="content" class="text-26rpx text-#919191 leading-44rpx">
      {{ content }}
    </view>
    <view v-else class="text-26rpx text-#919191 leading-44rpx">
      <slot />
    </view>
    <Spacer height="68" />
    <view class="flex items-center">
      <button v-if="showCancelButton" class="h-80rpx w-292rpx flex items-center justify-center rounded-full bg-#F8F8F8 text-30rpx text-#333333 leading-42rpx" hover-class="bg-#ECECEC" @tap="$emit('cancel')">
        {{ cancelLabel }}
      </button>
      <Spacer v-if="showCancelButton" width="24" />
      <button
        class="h-80rpx flex items-center justify-center rounded-full bg-#0037AE text-30rpx text-white leading-42rpx"
        :class="showCancelButton ? 'w-292rpx' : 'w-608rpx'"
        hover-class="bg-#3266D9"
        @tap="$emit('confirm')"
      >
        {{ confirmLabel }}
      </button>
    </view>
    <Spacer height="30" />
  </view>
</template>
